<template>
    <div class="addPatient">
        <navBar :titleName="titleName"></navBar>
        <!--<nut-textinput
                label="就诊人"
                :hasBorder="false"
                placeholder="姓名"
                v-model = "patientName"
        />-->

        <div class="form-group">
            <formCell v-model="patientName" title="就诊人" placeholder="姓名" tag="input" :notNull="true" :readonly="false"/>
        </div>

        <div class="form-group">
            <formCell v-model="phone" title="联系方式" placeholder="手机号码" tag="number" :notNull="true" :readonly="false"/>
        </div>

        <!--<nut-textinput
                label="联系方式"
                :hasBorder="false"
                placeholder="手机号码"
                v-model="phone"
        />-->

        <div class="form-group">
            <formCell v-model="gender" title="性别" :placeholder="gender" icon="true"
                      :notNull="true" :readonly="false" @myClickHandler="myClickFunc"></formCell>
        </div>

        <div class="form-group">
            <formCell v-model="address" title="联系地址" placeholder="地址" tag="input" :notNull="true" :readonly="false"/>
        </div>

        <multiselect class="multiselect" v-model="formData.value" :options="administration" placeholder="请输入给药途径" v-show="true"
                     :custom-label="nameWithLang" label="name" track-by="name" value="name" @select="chooseSomething(formData.value)"></multiselect>

        <nut-actionsheet :is-visible="isVisible"
                         @close="switchActionSheet('isVisible')"
                         :menu-items="menuItems"
                         @choose="chooseItem"
        ></nut-actionsheet>
        <nut-button @click="addFunc" block shape="circle" style="background-color: #4552ea;border-radius: 5px;width: 95%;
    height: 48px;font-size: 17px;margin-top: 40px;">
            确&nbsp;&nbsp;&nbsp;定
        </nut-button>
    </div>

</template>

<script>
    /* eslint-disable no-console */

    // import mycell from '@/components/common/my-cell.vue'
    import navBar from '@/components/common/navBar.vue'
    import formCell from "@/components/common/formCell.vue";
    import Multiselect from 'vue-multiselect/src/Multiselect.vue'


    export default {
        name: "addPatient",
        components: {
            navBar,
            // mycell,
            formCell,
            Multiselect
        },
        data() {
            return {
                flag: 0,
                today: "",
                titleName: '新增病人',
                patientName: "",
                phone: "",
                gender: "男",
                genderValue: 1,
                address: "",
                eduLevel: "请选择",
                eduLevelValue: "",
                nation: "汉族",
                cardType: "身份证",
                cardNo: "",
                email: "",
                allergry: "",
                hisRecored: "",
                birthday: "请选择日期",
                isVisible: false,
                isBirthVisible: false,
                menuItems: [],

                formData:{
                    value: {"code":150,"name":"口服","key":"KF"},
                },

                administration: [{"code":150,"name":"口服","key":"KF"},{"code":140,"name":"静脉输液","key":"JMSY"},{"code":18,"name":"小壶入","key":"XHR"},{"code":29,"name":"吸入","key":"XR"},{"code":143,"name":"静脉滴注ivd","key":"JMDZIVD"},{"code":144,"name":"肌肉注射","key":"JRZS"},{"code":145,"name":"皮下注射","key":"PXZS"},{"code":146,"name":"皮试","key":"PS"},{"code":147,"name":"皮内注射","key":"PNZS"},{"code":148,"name":"氧气雾化","key":"YQWH"},{"code":149,"name":"超声雾化","key":"CSWH"},{"code":200,"name":"饭前服","key":"FQF"},{"code":201,"name":"饭后服","key":"FHF"},{"code":202,"name":"与饭同服","key":"YFTF"},{"code":203,"name":"局麻用","key":"JMY"},{"code":204,"name":"封闭用","key":"FBY"},{"code":205,"name":"造影用","key":"ZYY"},{"code":206,"name":"冲洗用","key":"CXY"}]

            }
        },
        watch: {
            /*value: function (val) {
                if (/\s/.test(val)) {
                    this.value = val.split(" ")[1];
                }
            }*/
        },
        created() {
            let d = new Date();
            this.today = d.Format("yyyy-MM-dd");
            console.log("=========addPatient===========");
            console.log(this);
            console.log("=========addPatient===========");
        },
        methods: {
            nameWithLang({name, code, key}) {
                return `${code}  ${name}  ${key}`
            },
            chooseSomething(val) {
                console.log("--------chooseSomething--------");
                console.log(val);
                console.log("--------chooseSomething--------");
                return val.name;
            },
            addFunc() {

                if (!this.patientName) {
                    this.$toast.text("请输入病人姓名");
                    return;
                }

                this.phone = this.phone.replace(/\s*/g, "");

                if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.phone))) {
                    this.$toast.text("输入的手机号不正确");
                    return;
                }

                /*if (!this.address) {
                    this.$toast.text("请输入病人联系地址");
                    return;
                }
                if (!this.birthday) {
                    this.$toast.text("请输入病人生日信息");
                    return;
                }
                if (!this.eduLevelValue) {
                    this.$toast.text("请选择学历信息");
                    return;
                }*/

                //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                let regID = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
                if (this.cardNo && !regID.test(this.cardNo)) {
                    this.$toast.text("请输入合法的身份证号");
                    return;
                } else {
                    this.cardNo = "";
                }

                let regEmail = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
                //正则表达式
                if (this.email && !(regEmail.test(this.email))) {
                    this.$toast.text("输入的邮箱地址不正确");
                    return;
                } else {
                    this.email = "";
                }


                console.log({
                    "addr": this.address,
                    "allergry": this.allergry,
                    "birth": this.birthday == "请选择日期" ? "" : this.birthday,
                    "cardType": 0,
                    "eduLevel": this.eduLevel == "请选择" ? "" : this.eduLevel,
                    "email": this.email,
                    "hisRecored": this.hisRecored,
                    "idcard": this.cardNo,
                    "isDelete": 0,
                    "nation": this.nation,
                    "patientGender": this.genderValue,
                    "patientName": this.patientName,
                    "tel": this.phone
                });

                this.API.POST(this.ApiUrl.POST_ADD_PATIENT, {
                    "addr": this.address,
                    "allergry": this.allergry,
                    "birth": this.birthday == "请选择日期" ? "" : this.birthday,
                    "cardType": 0,
                    "eduLevel": this.eduLevel == "请选择" ? "" : this.eduLevel,
                    "email": this.email,
                    "hisRecored": this.hisRecored,
                    "idcard": this.cardNo,
                    "isDelete": 0,
                    "nation": this.nation,
                    "patientGender": this.genderValue,
                    "patientName": this.patientName,
                    "tel": this.phone
                }).then(({data}) => {
                    console.log("patient------", data);
                    if (data.code === 1200) {
                        this.$toast.text("添加病人信息完成");
                        this.$store.state.patient = data.data;
                        this.$router.go(-1);//返回上一层
                    }
                }).catch(err => {
                    console.log("addPatient::err------", err);
                    this.$toast.text("添加病人信息失败，请重试");
                });

            },
            myClickFunc() {
                this.flag = 1;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {'name': '男', 'value': '1'},
                    {'name': '女', 'value': '2'}
                ];
                this.isVisible = true;
            },
            myClickLeave() {
                this.flag = 2;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {'name': '学龄前', 'value': '0'},
                    {'name': '小学', 'value': '1'},
                    {'name': '初中', 'value': '2'},
                    {'name': '高中', 'value': '3'},
                    {'name': '中专', 'value': '4'},
                    {'name': '大专', 'value': '5'},
                    {'name': '本科', 'value': '6'},
                    {'name': '硕士', 'value': '7'},
                    {'name': '博士', 'value': '8'},
                    {'name': '其他', 'value': '9'}
                ];
                this.isVisible = true;
            },
            myClickNotion() {
                this.flag = 3;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {name: '汉族'},
                    {name: '蒙古族'},
                    {name: '回族'},
                    {name: '藏族'},
                    {name: '维吾尔族'},
                    {name: '苗族'},
                    {name: '彝族'},
                    {name: '壮族'},
                    {name: '布依族'},
                    {name: '朝鲜族'},
                    {name: '满族'},
                    {name: '侗族'},
                    {name: '瑶族'},
                    {name: '白族'},
                    {name: '土家族'},
                    {name: '哈尼族'},
                    {name: '哈萨克族'},
                    {name: '傣族'},
                    {name: '黎族'},
                    {name: '傈僳族'},
                    {name: '佤族'},
                    {name: '畲族'},
                    {name: '高山族'},
                    {name: '拉祜族'},
                    {name: '水族'},
                    {name: '东乡族'},
                    {name: '纳西族'},
                    {name: '景颇族'},
                    {name: '柯尔克孜族'},
                    {name: '土族'},
                    {name: '达翰尔族'},
                    {name: '么佬族'},
                    {name: '羌族'},
                    {name: '布朗族'},
                    {name: '撒拉族'},
                    {name: '毛南族'},
                    {name: '仡佬族'},
                    {name: '锡伯族'},
                    {name: '阿昌族'},
                    {name: '普米族'},
                    {name: '塔吉克族'},
                    {name: '怒族'},
                    {name: '乌孜别克族'},
                    {name: '俄罗斯族'},
                    {name: '鄂温克族'},
                    {name: '德昂族'},
                    {name: '保安族'},
                    {name: '裕固族'},
                    {name: '京族'},
                    {name: '塔塔尔族'},
                    {name: '独龙族'},
                    {name: '鄂伦春族'},
                    {name: '赫哲族'},
                    {name: '门巴族'},
                    {name: '珞巴族'},
                    {name: '基诺族'}
                ];
                this.isVisible = true;
            },
            myClickBirth() {
                this.isBirthVisible = true;
            },
            myClickCardType() {
                this.flag = 4;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {'name': '身份证', 'value': '0'},
                    {'name': '港澳通行证', 'value': '1'},
                    {'name': '护照', 'value': '2'},
                    {'name': '士兵证', 'value': '3'},
                    {'name': '军官证', 'value': '4'}
                ];
                this.isVisible = true;
            },
            chooseItem(itemParams) {
                console.log("------------------about chooseItem------------------");
                //性别
                if (this.flag == 1) {
                    console.log("------genderValue------");
                    console.log(itemParams);
                    console.log("------genderValue------");
                    this.gender = itemParams.name;
                    this.genderValue = itemParams.value;
                }
                //学历
                else if (this.flag == 2) {
                    this.eduLevel = itemParams.name;
                    this.eduLevelValue = itemParams.name;
                }
                //民族
                else if (this.flag == 3) {
                    this.nation = itemParams.name;
                }
                //证件类型
                else if (this.flag == 4) {
                    this.cardType = itemParams.name;
                }
                console.log("------------------about chooseItem------------------");
            },
            switchActionSheet(param) {
                this[`${param}`] = !this[`${param}`];
            },
            switchPicker(param) {
                this[`${param}`] = !this[`${param}`];
            },
            setChooseBirthValue(param) {
                this.birthday = param[3];
            },
        }
    }
</script>

<style>
    .addPatient .nut-textinput input {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        height: 40px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 14px;
        box-sizing: border-box;
        border-radius: 0px !important;
        border-bottom: 0.5px solid #DDDFE6;
        text-align: end !important;
        background-color: '#FFFFFF';
        padding: 0 30px 0 10px;
    }

    .addPatient {
        background-color: #e6e6e6;
        margin-top: 41px;
        width: 100%;
        min-height: 626px;
    }

    .addPatient .form-group {
        background-color: #fff;
        padding: 0px 10px;
    }

    .addPatient .form-group .form-item {
        font-size: 1em;
        padding: 14px 5px;
        border-bottom: 1px solid #e8e8e8;
    }

    .addPatient .form-group .item-textarea {
        height: 50px;
    }

    .addPatient .form-value {
        text-align: right;
        font-size: 0.8em !important;
    }

    .addPatient .form-item .form-value input {
        text-align: right;
    }

    .addPatient .nut-textinput {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;
        background-color: white !important;
        padding-left: 15px;
        border-bottom: 1px solid #DDDFE6;
        text-align: end !important;
    }

    .addPatient .nut-textinput-label {
        width: 74px !important;
        text-align: -webkit-auto;
    }

    .addPatient .nut-row:after {
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        content: '';
        min-height: 30px;
        padding-top: 6px;
    }

    .multiselect__input, .multiselect__single {
        line-height: 30px;
    }

</style>